<script setup>
import FocusLeft from '@/layout/SubLayout/FocusLeft.vue'
import { requestConfig } from '@/config'
import { SmartStorageApi } from '@/api/index'
import { dictStoreBinType, dictStoreMaterialTypeText, modelStoreMaterialListActions } from '@/pages/__view-constant/index'

const data = reactive({
  storageMapStatsReady: false,
  inventoryList: {
    east: [],
    west: [],
  },
  inventoryShowSide: 'west',
})

const { data: resStorageMapStats } = useRequest(SmartStorageApi.getStorageMapStats, {
  ...requestConfig.pollingNormal,
  onFinally: () => {
    data.storageMapStatsReady = true
  },
})
const formatedStorageMapStats = useFormatResult(resStorageMapStats, (res) => {
  let total = 0, usedCount = 0, eastStorage = res?.data?.eastWarehouseLocationList || [], westStorage = res?.data?.wastWarehouseLocationList || [], eastInventoryList = res?.data?.eastInventoryList || [], westInventoryList = res?.data?.wastInventoryList || []
  total = eastStorage.length + westStorage.length
  usedCount = eastStorage.filter(item => item.locationStatus !== dictStoreBinType.unUsed).length + westStorage.filter(item => item.locationStatus !== dictStoreBinType.unUsed).length // unUsed => '0':未占用

  const eastStoreData = eastStorage.slice(0, 52), westStoreData = westStorage.slice(0, 56)

  data.inventoryList = {
    east: eastInventoryList,
    west: westInventoryList,
  }
  return {
    countData: {
      total,
      usedCount,
    },
    eastStoreData,
    westStoreData,
  }
})

const setInventoryShowSide = (side) => {
  data.inventoryShowSide = side
}

const {
  storageMapStatsReady,
  inventoryShowSide,
  inventoryList,
} = toRefs(data)
</script>

<template>
  <FocusLeft>
    <template #left>
      <div style="height:100%">
        <UiPanel title="库位占用情况" stretch title-length="n2">
          <Storage3DViewer :east-store-data="formatedStorageMapStats?.eastStoreData || []" :west-store-data="formatedStorageMapStats?.westStoreData" :ready="storageMapStatsReady" />
        </UiPanel>
      </div>
    </template>
    <template #right>
      <div style="height:21.2555%">
        <UiPanel title="库位利用状态" stretch title-length="6">
          <ChartStoreBinsStatus :data="formatedStorageMapStats?.countData || {}" :ready="storageMapStatsReady" />
        </UiPanel>
      </div>
      <div style="flex:1;min-height: 0;" class="mt-26px">
        <UiPanel title="库位物料状态" stretch title-length="6" :actions="modelStoreMaterialListActions" :active-action="inventoryShowSide" @tab-change="setInventoryShowSide">
          <StoreMaterialStatusList :data="inventoryList[inventoryShowSide]" :dict="dictStoreMaterialTypeText" :ready="storageMapStatsReady" />
        </UiPanel>
      </div>
    </template>
  </FocusLeft>
</template>

<page-meta lang="yaml">
title: 智能仓储
layout: main
</page-meta>

<style lang='scss' scoped>

</style>
